<template>
	
		<dialog  :open="data.state">
			{{msg}}
		</dialog>

		
</template>

<script setup>
	import store from '@/store';
	import { computed, onMounted, reactive, ref, watch } from 'vue';
	
	const data = reactive({
		state:false
	})
	
	const msg = computed(()=>{	
		return store.state.msg;
	})
	
	//监听更改
	watch(msg, (New,Old) => {
		data.state = true
	})
	
	onMounted(()=>{
		//定时器关闭提示窗口
		setInterval(()=>{
			data.state = false;
		},3000)
	})
	
</script>

<style>
	dialog{
		top: 20px;
		font-size: 0.9em;
		min-width: 20%;
		height: 20px;
		max-height: 20px;
		background-color: lightyellow;
		border: 1px solid lawngreen;
	}
</style>